<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能知识库助手 - 多文件类型支持</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        /* 内联样式用于文件类型指示器 */
        .file-type-indicator {
            display: inline-block;
            padding: 2px 6px;
            margin-right: 8px;
            font-size: 10px;
            font-weight: bold;
            border-radius: 3px;
            color: white;
            text-transform: uppercase;
        }
        
        .file-type-indicator.txt {
            background-color: #6c757d;
        }
        
        .file-type-indicator.pdf {
            background-color: #dc3545;
        }
        
        .file-type-indicator.doc,
        .file-type-indicator.docx {
            background-color: #6c757d;
        }
        
        .file-icon {
            font-size: 20px;
            margin-right: 10px;
        }
        
        .file-info {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .upload-status {
            font-size: 12px;
            margin-top: 4px;
        }
        
        .upload-status.success {
            color: #6c757d;
        }
        
        .upload-status.error {
            color: #dc3545;
        }
        
        .upload-status.processing {
            color: #ff9800;
        }
        
        .mode-info {
            background-color: #f8f9fa;
            padding: 8px 12px;
            border-radius: 4px;
            margin-bottom: 10px;
            font-size: 13px;
            color: #6c757d;
            border-left: 3px solid #adb5bd;
        }
        
        .web-search-content {
            background-color: #f8f9fa;
            padding: 10px;
            border-radius: 4px;
            border-left: 3px solid #adb5bd;
        }
        
        /* 响应式文件列表 */
        @media (max-width: 600px) {
            .file-item {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .file-icon {
                margin-bottom: 8px;
            }
            
            .file-actions {
                align-self: flex-end;
                margin-top: 8px;
            }
        }
    
    /* 输入区域左对齐 */
    .message-input-container {
        justify-content: flex-start;
    }
    </style>
</head>
<body>

    
    <div class="main-container">
        <!-- 左侧上传知识库部分 -->
        <div class="left-panel panel">
            <h3 style="font-size: 20px;">📚 导入知识库</h3>
            
            <div class="upload-area" id="drop-area" style="margin-top: 30px; width: 100%; margin-left: auto; margin-right: auto; height: 140px; padding: 10px;">
                <div class="upload-icon" style="font-size: 24px;">📄</div>
                <div class="upload-text">
                    拖拽知识库文件至此
                </div>
                <input type="file" id="file-upload" multiple accept=".txt,.pdf,.doc,.docx" style="display:none;">
            </div>
            
            <div class="uploaded-files" id="uploaded-files">
                <!-- 上传的文件将显示在这里 -->
            </div>
            
            <button id="process-files-btn" class="primary-button">
                <span>📤 处理文件</span>
            </button>
            
            <div class="processing-status">
                <div class="status-header">
                    <span>📋 处理进度</span>
                </div>
                <div id="processing-results" class="status-content">
                    <!-- 处理结果将显示在这里 -->
                    <div class="status-waiting">请上传文件以开始处理...</div>
                </div>
            </div>
            
            <div class="search-options">
                <div class="search-toggle" style="display: none;">
                    <div class="toggle-label">🌐 联网搜索：</div>
                    <label class="switch">
                        <input type="checkbox" id="web-search-toggle">
                        <span class="slider round"></span>
                    </label>
                </div>
                
                <div class="retrieval-options">
                    <div class="radio-group">
                        <label class="radio-container" title="仅使用向量语义检索">
                            <input type="radio" name="rag-mode" id="single-retrieval" value="single" checked>
                            <span class="radio-custom"></span>
                            <span class="radio-label">单一检索</span>
                        </label>
                        <label class="radio-container" title="结合向量检索和关键词检索，智能融合结果">
                            <input type="radio" name="rag-mode" id="hybrid-retrieval" value="hybrid">
                            <span class="radio-custom"></span>
                            <span class="radio-label">混合检索</span>
                        </label>
                    </div>
                    <div class="retrieval-description" id="retrieval-description">
                        <small style="color: #c5cae9; font-style: italic; font-size: 13px;">
                            基于语义相似度的向量检索
                        </small>
                    </div>
                </div>
                
                <!-- 添加流式输出选项 -->
                <div class="search-toggle">
                    <div class="toggle-label">🚀 流式输出：</div>
                    <label class="switch">
                        <input type="checkbox" id="use-streaming" checked>
                        <span class="slider round"></span>
                    </label>
                </div>
            </div>
        </div>
        
        <!-- 中间对话部分 -->
        <div class="center-panel panel">
            <h3>🌌 银河麒麟OS智能运维助手</h3>
            
            <div class="tabs">
                <button class="tab-btn active" data-tab="conversation">
                    <span>💭 对话界面</span>
                </button>
                <button class="tab-btn" data-tab="related-docs">
                    <span>📖 相关文档片段</span>
                </button>
            </div>
            
            <div class="tab-content active" id="conversation">
                <!-- 对话历史区域 -->
                <div class="chat-container" id="chat-container">
                    <div class="message assistant-message">
                        <div class="message-bubble" data-sender="Assistant">
                            🌟 欢迎使用麒麟智能运维助手 支持多种大模型和各类文件格式 😊
                        </div>
                    </div>
                    <!-- 对话消息将显示在这里 -->
                </div>
                
                <!-- 发送消息区域 -->
                <div class="message-input-container">
                    <textarea 
                        id="message-input" 
                        placeholder="请输入您的问题..." 
                        rows="3">
                    </textarea>
                    <button id="send-btn" class="send-button" title="发送消息 (Ctrl+Enter)">
                        <span class="send-icon">➤</span>
                        <span class="send-text">发送</span>
                    </button>
                </div>
                
                <!-- 聊天功能按钮 -->
                <div class="chat-actions">
                    <button id="clear-chat-btn" class="secondary-button" title="清空当前对话历史">
                        🗑️ 清空对话
                    </button>
                </div>
            </div>
            
            <div class="tab-content" id="related-docs">
                <div id="search-results">
                    <!-- 搜索结果将在这里显示 -->
                    <div class="placeholder">
                        <div style="text-align: center; color: #adb5bd; font-style: italic; padding: 40px 20px;">
                            <div style="font-size: 48px; margin-bottom: 16px;">🔍</div>
                            <div>提交问题后将显示相关文档片段</div>
                            <div style="font-size: 14px; margin-top: 8px;">包括检索来源和文件信息</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 右侧辅助功能部分 -->
        <div class="right-panel panel">
            <h3>⚡ 快速助手</h3>
            
            <div class="examples-section">
                <div class="examples-title">
                <span>💡</span>
                <span>快速提问示例：</span>
            </div>
                <div class="examples-grid">
                    <button class="example-item" title="点击快速输入">麒麟系统网络失败怎么排查？</button>
                    <button class="example-item" title="点击快速输入">麒麟系统启动异常如何处理？</button>
                    <button class="example-item" title="点击快速输入">麒麟系统运行卡顿如何优化？</button>
                    <button class="example-item" title="点击快速输入">麒麟系统磁盘不足如何清理？</button>
                    <button class="example-item" title="点击快速输入">麒麟账户登录失败如何解决？</button>
                    <button class="example-item" title="点击快速输入">麒麟日志报错如何诊断？</button>
                </div>
            </div>
            
            <!-- 文件类型说明 -->
            <div class="file-support-info">
                <div class="examples-title">📋 支持的文件格式：</div>
                <div class="file-format-grid">
                    <div class="format-card">
                        <div class="format-icon">📄</div>
                        <div class="format-name">TXT</div>
                        <div class="format-desc">纯文本文件</div>
                    </div>
                    <div class="format-card">
                        <div class="format-icon">📕</div>
                        <div class="format-name">PDF</div>
                        <div class="format-desc">Adobe PDF文档</div>
                    </div>
                    <div class="format-card">
                        <div class="format-icon">📘</div>
                        <div class="format-name">DOC</div>
                        <div class="format-desc">Word 97-2003文档</div>
                    </div>
                    <div class="format-card">
                        <div class="format-icon">📘</div>
                        <div class="format-name">DOCX</div>
                        <div class="format-desc">Word 2007+文档</div>
                    </div>
                </div>
            </div>
            
            <!-- 清空对话按钮 -->
            <div class="right-panel-actions">
                <button id="clear-chat-btn-right" class="clear-chat-btn" title="清空当前对话历史">
                    🧹 清空对话
                </button>
            </div>

        </div>
    </div>
    
    <!-- 隐藏的状态指示器 -->
    <div id="connection-status" style="display: none;">
        <div class="status-offline" style="background: #6c757d; color: white; padding: 8px; text-align: center; position: fixed; top: 0; width: 100%; z-index: 1000;">
            ⚠️ 网络连接已断开，部分功能可能不可用
        </div>
    </div>
    
    <script>
        // 全局配置
        const APP_CONFIG = {
            maxFileSize: 50 * 1024 * 1024, // 50MB
            supportedTypes: ['txt', 'pdf', 'doc', 'docx'],
            apiTimeout: 30000, // 30秒
            retryAttempts: 3
        };
        
        // 文件类型配置
        const FILE_TYPE_CONFIG = {
            'txt': { icon: '📄', color: '#6c757d', name: 'TXT', description: '纯文本文件' },
            'pdf': { icon: '📕', color: '#dc3545', name: 'PDF', description: 'Adobe PDF文档' },
            'doc': { icon: '📘', color: '#6c757d', name: 'DOC', description: 'Word 97-2003文档' },
            'docx': { icon: '📘', color: '#6c757d', name: 'DOCX', description: 'Word 2007+文档' }
        };
        
        // 检索模式配置
        const RETRIEVAL_MODES = {
            'single': {
                name: '单一检索',
                description: '基于语义相似度的向量检索',
                icon: '🎯'
            },
            'hybrid': {
                name: '混合检索',
                description: '结合向量和关键词检索，智能融合结果',
                icon: '🔀'
            }
        };
    </script>
    <script src="script.js"></script>
    
    <script>
        // 添加检索模式说明更新
        document.addEventListener('DOMContentLoaded', function() {
            const retrievalRadios = document.querySelectorAll('input[name="rag-mode"]');
            const descriptionElement = document.getElementById('retrieval-description');
            
            function updateRetrievalDescription() {
                const selectedMode = document.querySelector('input[name="rag-mode"]:checked').value;
                const config = RETRIEVAL_MODES[selectedMode];
                descriptionElement.innerHTML = `
                    <small style="color: #6c757d; font-style: italic;">
                        ${config.description}
                    </small>
                `;
            }
            
            // 初始化描述
            updateRetrievalDescription();
            
            // 监听模式变化
            retrievalRadios.forEach(radio => {
                radio.addEventListener('change', updateRetrievalDescription);
            });
            
            // 文件大小验证
            const fileInput = document.getElementById('file-upload');
            fileInput.addEventListener('change', function(e) {
                const files = Array.from(e.target.files);
                const oversizedFiles = files.filter(file => file.size > APP_CONFIG.maxFileSize);
                
                if (oversizedFiles.length > 0) {
                    alert(`以下文件超过大小限制 (${APP_CONFIG.maxFileSize / 1024 / 1024}MB):\n${oversizedFiles.map(f => f.name).join('\n')}`);
                    // 清除超大文件
                    e.target.value = '';
                    return;
                }
            });
            
            // 网络状态监听
            function updateConnectionStatus() {
                const statusEl = document.getElementById('connection-status');
                if (navigator.onLine) {
                    statusEl.style.display = 'none';
                } else {
                    statusEl.style.display = 'block';
                }
            }
            
            window.addEventListener('online', updateConnectionStatus);
            window.addEventListener('offline', updateConnectionStatus);
            updateConnectionStatus();
        });
        
        // 格式化文件大小显示
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 B';
            const k = 1024;
            const sizes = ['B', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
        }
        
        // 添加文件拖拽样式
        document.addEventListener('DOMContentLoaded', function() {
            const dropArea = document.getElementById('drop-area');
            
            // 防止默认拖拽行为
            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                document.addEventListener(eventName, function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                }, false);
            });
            
            // 拖拽进入页面时的效果
            ['dragenter', 'dragover'].forEach(eventName => {
                document.addEventListener(eventName, function() {
                    document.body.style.backgroundColor = '#f8f9fa';
                    dropArea.style.borderColor = '#adb5bd';
                    dropArea.style.backgroundColor = '#e9ecef';
                    dropArea.style.transform = 'scale(1.02)';
                });
            });
            
            // 拖拽离开页面时恢复
            ['dragleave', 'drop'].forEach(eventName => {
                document.addEventListener(eventName, function() {
                    document.body.style.backgroundColor = '';
                    dropArea.style.borderColor = '';
                    dropArea.style.backgroundColor = '';
                    dropArea.style.transform = '';
                });
            });
        });
    </script>
</body>
</html>